<template>
    <div>
        <NavTopBar title="购物车" :fixed="true" :placeholder="true" />

        <van-checkbox-group class="car" v-model="checked">
            <van-swipe-cell v-for="item of goodsList" :key="item.goodsId">
                <div class="car_item">
                    <van-checkbox :name="item.cartItemId" />
                    <GoodItem :item="item" />
                </div>
                <template #right>
                    <van-button
                        @click="delPro(item.cartItemId)"
                        class="car_item_del"
                        square
                        text="删除"
                        type="danger"
                    />
                </template>
            </van-swipe-cell>
        </van-checkbox-group>

        <van-submit-bar
            class="submit_box"
            :price="total * 100"
            button-text="提交订单"
            @submit="onSubmit"
            safe-area-inset-bottom
            v-if="goodsList.length"
        >
            <van-checkbox v-model="allChecked" @click="changeAll"
                >全选</van-checkbox
            >
            <template #tip>
                你的收货地址不支持同城送,
                <span @click="onClickLink">修改地址</span>
            </template>
        </van-submit-bar>

        <div class="empty" v-if="!goodsList.length">
            <img
                class="empty-cart"
                src="https://s.yezgea02.com/1604028375097/empty-car.png"
                alt="空购物车"
            />
            <div class="title">购物车空空如也</div>
            <van-button round color="#1baeae" type="primary" @click="goTo" block
                >前往选购</van-button
            >
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import baseHook from "./hook/base";
import NavTopBar from "@/components/NavTopbar.vue";
import GoodItem from "@/components/GoodsItem.vue";
export default defineComponent({
    components: { NavTopBar, GoodItem },
    setup() {
        const {
            checked,
            goodsList,
            onSubmit,
            changeAll,
            allChecked,
            total,
            delPro,
            goTo,
        } = baseHook();
        return {
            checked,
            goodsList,
            onSubmit,
            changeAll,
            allChecked,
            total,
            delPro,
            goTo,
        };
    },
});
</script>

<style lang="scss" scoped>
.car {
    padding: 10px;
    margin-bottom: 120px;
    &_item {
        display: flex;
        margin-top: 10px;
        &_info {
            flex: 1;
            margin-top: 0px;
            margin-left: 10px;
        }
        &_del {
            padding-top: 10px;
            height: 100%;
        }
    }
}
.submit_box {
    height: 100px;
    margin-bottom: 50px;
}

.empty {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    margin-top: 200px;
    .empty-cart {
        width: 150px;
        margin-bottom: 20px;
    }
    .van-icon-smile-o {
        font-size: 50px;
    }
    .title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}
</style>
